<!-- <template>
	<div id="index">
  <header>
    <ul>
      <li>
        <img src="../assets/img/dingwei.png">
        <p>海淀</p>
      </li>
      <li>
        <img src="../assets/img/fanhui.png">
        <img src="../assets/img/head-sousuo.png">
        <img src="../assets/img/huihua.png">
      </li>
    </ul>
  </header>
		<div class="swiper-container banners">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../assets/img/index-banner.png"/></div>
                <div class="swiper-slide"><img src="../assets/img/index-banner.png"/></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <nav>
        	<ul>
        		<li v-for="tst in tsst">
        			<img v-bind:src="tst.imgs">
        			<a href="#">{{tst.text}}</a>
        		</li>
        	</ul>
        </nav>
        <article>
        	<div class="left">
        		<img v-bind:src="imgs">
        	</div>
        	<div class="right">
        		<div class="right_1"><img v-bind:src="img"></div>
        		<div class="right_2"><img v-bind:src="imgss"></div>
        	</div>
        </article>
        <div class="banner">
        	<img v-bind:src="banner_imgs">
        </div>
        <div class="section">
        	<div class="top">
        		<ul>
        			<li><img src="../assets/img/line.png"></li>
        			<li>{{text}}</li>
        			<li><img src="../assets/img/line.png"></li>
        		</ul>
        	</div>
        	<div class="bottom">
        		<div class="bottom_left">
        			<img src="../assets/img/picture6.png">
        		</div>
        		<div class="bottom_right">
        			<h1>{{text1}}</h1>
        			<p>{{text2}}</p>
        			<div class="xingxing">
        				<ul>
        					<li><img v-bind:src="wujiaoxing"></li>
        					<li>|</li>
        					<li>{{xing}}</li>
        				</ul>
        			</div>
        			<h2>{{text3}}</h2>
        			<div class="shoudan">
        				<ul>
        					<li v-for="sta in stasts">
        						<img v-bind:src="sta.imgs">
        						<a href="#">{{sta.text}}</a>
        					</li>
        				</ul>
        			</div>
        		</div>
        	</div>
        	<div class="bottom">
        		<div class="bottom_left">
        			<img src="../assets/img/picture6.png">
        		</div>
        		<div class="bottom_right">
        			<h1>{{text1}}</h1>
        			<p>{{text2}}</p>
        			<div class="xingxing">
        				<ul>
        					<li><img v-bind:src="wujiaoxing"></li>
        					<li>|</li>
        					<li>{{xing}}</li>
        				</ul>
        			</div>
        			<h2>{{text3}}</h2>
        			<div class="shoudan">
        				<ul>
        					<li v-for="sta in stasts">
        						<img v-bind:src="sta.imgs">
        						<a href="#">{{sta.text}}</a>
        					</li>
        				</ul>
        			</div>
        		</div>
        	</div>
        </div>
        <footer>
        	<ul>
				<li v-for="info in infos">
          <router-link :to="info.path">
					<img v-bind:src="info.imgs">
					<a href="#">{{info.test}}</a>
          </router-link>
				</li>
			</ul>
        </footer>
	</div>
</template>

<script>
import '../assets/js/swiper.min.js'
export default {
  name: 'index',
  data(){
    return{
    	imgs:"../static/img/picture8.png",
    	img:"../static/img/pic1.png",
    	imgss:"../static/img/pic2.png",
    	banner_imgs:"../static/img/banner.png",
    	text:"附近的店铺",
    	text1:"仙丰名酒茗茶超市",
    	text2:"商家自送-120分钟",
    	text3:"现在只配送白酒系列，其他物品勿拍，暂时不发...",
    	wujiaoxing:"../static/img/wujiaoxing.png",
    	xing:"月售23单",
       		tsst:[
       			{
       				imgs:"../static/img/menu1.png",
       				text:"超市便利"
       			},
       			{
       				imgs:"../static/img/menu2.png",
       				text:"新鲜果蔬"
       			},
       			{
       				imgs:"../static/img/menu3.png",
       				text:"零食小吃"
       			},
       			{
       				imgs:"../static/img/menu4.png",
       				text:"鲜花烘焙"
       			},
       			{
       				imgs:"../static/img/menu5.png",
       				text:"医药健康"
       			}
       		],
       		infos:[
		           {
		           	imgs:"../static/img/menus1.png",
		           	test:"首页",
		            path:"index"
		           },
		           {
		           	imgs:"../static/img/menus2.png",
		           	test:"分类",
		            path:"index"
		           },
		           {
		           	imgs:"../static/img/menus3.png",
		           	test:"购物车",
		            path:"shopping"
		           },
		           {
		           	imgs:"../static/img/menus4.png",
		           	test:"订单",
		            path:"dingdan"
		           },
		           {
		           	imgs:"../static/img/menus5.png",
		           	test:"我的",
		            path:"/my"
		           }
		       ],
       		stasts:[
       			{
       				imgs:"../static/img/shoudan.png",
       				text:"商家首单满599减50"
       			},
       			{
       				imgs:"../static/img/yunfei.png",
       				text:"免基础运费"
       			},
       		]

       }
  },
   mounted() {
    var swiper = new Swiper('.swiper-container',{
      autoplay:1000,
      scrollbarHide:false,
      autoplayDisableOnInteraction:false,
      loop:true,
      pagination:".swiper-pagination"
    })
  }
}
</script>

<style scoped lang="less">
@import '.././assets/less/style.less';
@import '.././assets/css/reset.css';
@import '.././assets/less/index.less';
@import '.././assets/css/swiper.css';

</style>
 -->